<!-- home -->
<template>
  <div class="container">
		<van-nav-bar style="background-color: #3090EC;">
			<template #left>
        <van-icon name="wap-home-o" @click="goHome" color="white" size="25"/>
			</template>
      <template #title>
				<span style="color: white;">列表</span>
			</template>
		</van-nav-bar>

    <van-search v-model="noticeTitle" placeholder="请输入标题关键词" show-action @search="getMyList">
      <div slot="action" @click="getMyList">搜索</div>
    </van-search>
    <van-tabs v-model="active" color="#1989fa" @click="changeTab">
      <van-tab :title="item.dictLabel" :name="item.dictValue" v-for="item in tabsList" :key="item.dictValue"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" finished-text="暂无更多信息" @load="onLoad">
      <van-cell
        :title="item.noticeTitle"
        :label="item.textContent"
        v-for="item in repostList"
        :key="item.noticeId"
        @click="onDetail(item.noticeId)"
      >
        <template> <van-image width="100" height="80" :src="item.noticeImage" /></template>
        <template #extra>
          <div class="cell_time">{{ item.createTime }}</div></template
        >
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getType, getMyList } from '@/api/news.js'
// 组件缓存清除方法
import { clearCache } from '@/utils/index.js'
import { NavBar,Icon,Button } from 'vant';
// 请求接口
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
        
  name: 'NewsDetail',
  data() {
    return {
      active: '',
      noticeTitle: '',
      tabsList: [],
      type: this.$route.params.type || '',
      repostList: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 5,
      total: 0
    }
  },
  computed: {
    query() {
      return {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        dictType: this.type,
        subType: this.active,
        noticeTitle: this.noticeTitle
      }
    }
  },
  mounted() {
    this.initData()
  },
  beforeRouteLeave(to, from, next) {
    // 如果不是去详情页 就清空缓存
    if (to.name !== 'NewsDetail') {
      clearCache(this)
    }
    next()
  },
  methods: {
    // 切换tabs时更新数据
    changeTab(name, title) {
      this.repostList = []
      this.pageNum = 1
      // 如果已经加载完了 重置 反之主动更新数据
      if (this.finished) {
        this.finished = false
      } else {
        this.loading = true
        this.onLoad()
      }
    },
    // 初始化 获取二级菜单
    async initData() {
      const params = { type: this.type }
      const { data } = await getType(params)
      this.tabsList = data
      this.active = data[0].dictValue
    },
    // 加载资讯列表
    async getMyList() {
      this.pageNum = 1
      this.pageSize = 5
      this.total = 0
      this.repostList = []
      this.loading = true
      this.finished = false
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        getMyList(this.query).then(res => {
          // 下拉刷新获取
          const { list, total } = res.data
          this.total = total
          this.repostList = [...this.repostList, ...list]
          this.pageNum = this.pageNum + 1
          this.loading = false
          if (this.repostList.length >= this.total) {
            this.finished = true
          }
        })
      }, 500)
    },
    // 跳转新闻详情
    onDetail(id) {
      this.$router.push(`/news/detail/${id}`)
    },
    goHome(){
      this.$router.push(`/home`)
    }
  }
}
</script>
<style lang="scss" scoped>
body {
  background: #f6f6f6;
}
// 溢出省略
.van-cell__label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cell_time {
  position: absolute;
  bottom: 10px;
  color: #969799;
  font-size: 12px;
}
</style>
